<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
	<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css" /> ">
	<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap-theme.css" />" >
	<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables.css" />" >
	<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables_themeroller.css" />" >
	<script type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/resources/js/bootstrap.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/resources/js/jquery.dataTables.js" /> "></script>
	<script type="text/javascript">
	$(document).ready(function(){
			$(".home").click(function(e){
				e.preventDefault();
				
				var d = document.getElementById("home");
				d.className = d.className + " active";

				var d = document.getElementById("listStudent");
				d.classList.remove("active");

				var d = document.getElementById("register");
				d.classList.remove("active");

				document.getElementById("mybody").innerHTML = "";
			});

			$(".listStudent").click(function(e){
				var href = $(this).attr("href");
				e.preventDefault();
				$.ajax({
					type:'get',
					url: href,
					dataType: "json",
					success: function(itemData){
						var d = document.getElementById("listStudent");
						d.className = d.className + " active";
						
						var d = document.getElementById("home");
						d.classList.remove("active");

						var d = document.getElementById("register");
						d.classList.remove("active");
						
						var mybody = "<table id='tableListStudent' class='table table-bordered table-striped table-hover'>";
						mybody += "<thead>";
							mybody += "<tr>";
								mybody += "<th>" + 'Id' + "</th>";
								mybody += "<th>" + 'Name' + "</th>";
								mybody += "<th>" + 'Age' + "</th>";
								mybody += "<th>" + 'Address' + "</th>";
								mybody += "<th>" + 'Grade' + "</th>";
								mybody += "<th>" + 'Major' + "</th>";
								mybody += "<th>" + 'View' + "</th>";
							mybody += "</tr>";
						mybody += "</thead>";
						mybody += "<tbody>";
						for(var i =0;i < itemData.length;i++) {
							var student = itemData[i];
							mybody += "<tr>";
								mybody += "<td>" + student.studentid + "</td>";
								mybody += "<td>" + student.name + "</td>";
								mybody += "<td>" + student.age + "</td>";
								mybody += "<td>" + student.address + "</td>";
								mybody += "<td>" + student.grade + "</td>";
								mybody += "<td>" + student.major + "</td>";
								mybody += "<td><a href='" + student.studentid + "' class='btn btn-danger detailStudent'>" + 'View' + "</a></td>";
							mybody += "</tr>";
						}
						mybody += "</tbody>";
					mybody += "</table>";
					document.getElementById("mybody").innerHTML = mybody;
					$("#tableListStudent").dataTable();
				  }				
				});
			});

			$(document).on('click', 'a.detailStudent', function(e) {
				
				var id = $(this).attr("href");
				e.preventDefault();
				$.ajax({
					type:'get',
					url: '/restful/students/' + id,
					dataType: "json",
					success: function(student){

						var d = document.getElementById("listStudent");
						d.classList.remove("active");

						var d = document.getElementById("home");
						d.classList.remove("active");
						
						var mybody = "<table class='table table-bordered table-striped table-hover'>";
							mybody += "<thead>";
								mybody += "<tr>";
									mybody += "<th>" + 'Id' + "</th>";
									mybody += "<th>" + 'Name' + "</th>";
									mybody += "<th>" + 'Age' + "</th>";
									mybody += "<th>" + 'Address' + "</th>";
									mybody += "<th>" + 'Grade' + "</th>";
									mybody += "<th>" + 'Major' + "</th>";
									mybody += "<th>" + 'Edit' + "</th>";
									mybody += "<th>" + 'Delete' + "</th>";
								mybody += "</tr>";
							mybody += "</thead>";
							mybody += "<tbody>";
								mybody += "<tr>";
										mybody += "<td>" + student.studentid + "</td>";
										mybody += "<td>" + student.name + "</td>";
										mybody += "<td>" + student.age + "</td>";
										mybody += "<td>" + student.address + "</td>";
										mybody += "<td>" + student.grade + "</td>";
										mybody += "<td>" + student.major + "</td>";
										mybody += "<td><a href='" + student.studentid + "' class='btn btn-primary editStudent'>" + 'Edit' + "</a></td>";
										mybody += "<td><a href='" + student.studentid + "' class='btn btn-danger deleteStudent'>" + 'Delete' + "</a></td>";
								mybody += "</tr>";
							mybody += "</tbody>";
						mybody += "</table>";
						document.getElementById("mybody").innerHTML = mybody;
					}				
				});
			});
			
			$(document).on('click', 'a.deleteStudent', function(e){
				e.preventDefault();
				var id = $(this).attr("href");
				$.ajax({
					type: 'post',
					url: "http://localhost:8080/restful/delete/" + id,
					success: function(message){
						var myalert = "<div class='alert alert-success'>";
							myalert += message;
						myalert += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					},
					error: function(message){
						var myalert = "<div class='alert alert-danger'>";
							myalert += 'Delete failed';
						myalert += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					}
				});
			});

			$(document).on('click', 'a.editStudent', function(e){
				e.preventDefault();
				var id = $(this).attr("href");
				$.ajax({
					type: 'get',
					url: '/restful/students/' + id,
					dataType: "json",
					success: function(student){
						$("#modalEdit").modal();
						document.getElementById("inputId").value = student.studentid;
						document.getElementById("inputName").value = student.name;
						document.getElementById("inputAge").value = student.age;
						document.getElementById("inputAddress").value = student.address;
						document.getElementById("inputGrade").value = student.grade;
						document.getElementById("inputMajor").value = student.major;
					}
				});
			});

			$(document).on('click', '.register', function(e){
				e.preventDefault();
				
				var d = document.getElementById("home");
				d.classList.remove("active");

				var d = document.getElementById("listStudent");
				d.classList.remove("active");

				var d = document.getElementById("register");
				d.className = d.className + " active";

				var myform = "<form class='form-horizontal form_register'>";
					myform += "<div class='form-group'>";
						myform += "<label for='inputName' class='col-sm-3 control-label'>" + 'Name';
						myform += "</label>";
						myform += "<div class='col-sm-6'>";
							myform += "<input class='form-control' name='name' id='name' placeholder='Name' />";
						myform += "</div>";
					myform += "</div>";
					myform += "<div class='form-group'>";
						myform += "<label for='inputAge' class='col-sm-3 control-label'>" + 'Age';
						myform += "</label>";
						myform += "<div class='col-sm-6'>";
							myform += "<input class='form-control' name='age' id='age' placeholder='Age' />";
						myform += "</div>";
					myform += "</div>";
					myform += "<div class='form-group'>";
						myform += "<label for='inputAddress' class='col-sm-3 control-label'>" + 'Address';
						myform += "</label>";
						myform += "<div class='col-sm-6'>";
							myform += "<input class='form-control' name='address' id='address' placeholder='Address' />";
						myform += "</div>";
					myform += "</div>";
					myform += "<div class='form-group'>";
						myform += "<label for='inputGrade' class='col-sm-3 control-label'>" + 'Grade';
						myform += "</label>";
						myform += "<div class='col-sm-6'>";
							myform += "<input class='form-control' name='grade' id='grade' placeholder='Grade' />";
						myform += "</div>";
					myform += "</div>";
					myform += "<div class='form-group'>";
						myform += "<label for='inputMajor' class='col-sm-3 control-label'>" + 'Major';
						myform += "</label>";
						myform += "<div class='col-sm-6'>";
							myform += "<input class='form-control' name='major' id='major' placeholder='Major' />";
						myform += "</div>";
					myform += "</div>";
					myform += "<div class='form-group'>";
						myform += "<div class='col-sm-offset-4 col-sm-10'>";
							myform += "<button type='submit' class='btn btn-default btn-success' >" + 'Register';
							myform += "</button>";
						myform += "</div>";
					myform += "</div>";
				myform += "</form>";

				document.getElementById("mybody").innerHTML = myform;
			});

			$(document).on('submit', 'form.form_register', function(e){
				e.preventDefault();
				var href = "<c:url value='/register' />";
				var student = {name: $("#name").val(), age: $("#age").val(), address:$("#address").val(), grade:
						$("#grade").val(), major: $("#major").val()};
				$.ajax({
					type: 'post',
					url: href,
					contentType : 'application/json; charset=utf-8',
					data: JSON.stringify(student),
					async: false,
					success: function(respone){
						var myalert = "<div class='alert alert-info'>";
							myalert += respone;
						myalert  += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					},
					error: function(){
						var myalert = "<div class='alert alert-danger'>";
							myalert += 'Failed';
						myalert += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					}
				});
			});

			$(document).on('submit', 'form.form_edit', function(e){
				e.preventDefault();
				var studentNew = {studentid: $("#inputId").val() ,name: $("#inputName").val(), age: $("#inputAge").val(), address:$("#inputAddress").val(), grade:
					$("#inputGrade").val(), major: $("#inputMajor").val()};
				$.ajax({
					type: 'post',
					url: "<c:url value='/edit' />",
					contentType : 'application/json; charset=utf-8',
					data: JSON.stringify(studentNew),
					async: false,
					success: function(respone){
						var myalert = "<div class='alert alert-info'>";
							myalert += respone;
						myalert += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					},
					error: function(){
						var myalert = "<div class='alert alert-danger'>";
							myalert += 'Update failed';
						myalert += "</div>";
						document.getElementById("mybody").innerHTML = myalert;
					}
				
				});
				$("#modalEdit").modal('hide');
			});
	});	
	</script>
</head>
 
<body >

<div class="container">
      <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="">Spring Restful</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li id="home"><a href="/restful" class="home">Home</a></li>
              <li id="listStudent"><a href="/restful/students" class="listStudent">List Student</a></li>
              <li id="register"><a href="/register" class="register">Register</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>

    </div> <!-- /container -->
    
  <div class="container">
  	<div id="mybody" style="padding-bottom: 50px;"></div>
  </div>
  
  <!-- Modal -->
<form class="form-horizontal form_edit" role="form">
	<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Edit Information</h4>
	      </div>
	      <div class="modal-body">
	      
	      	   <input type="hidden" class="form-control" id="inputId">
	      	   
			  <div class="form-group">
			    <label for="inputName" class="col-sm-3 control-label">Name</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="inputName">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputAge" class="col-sm-3 control-label">Age</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="inputAge" >
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputAdress" class="col-sm-3 control-label">Address</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="inputAddress" >
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="inputGrade" class="col-sm-3 control-label">Grade</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="inputGrade" >
			    </div>
			  </div>
			   <div class="form-group">
			    <label for="inputMajor" class="col-sm-3 control-label">Major</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="inputMajor" >
			    </div>
			  </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
</form>
</body>
</html>